<template>
  <div class="bg-black">
    <div class="text-24 mb-10px pt-40px px-40px text-#595A60">
      {{
        pageStatus === "add"
          ? "发布"
          : pageStatus === "view"
            ? "订单详情"
            : pageStatus === "edit"
              ? "编辑订单"
              : ""
      }}
    </div>
    <div class="flex">
      <div class="flex-1 p-40px">
        <el-form
          :inline="disabledForm"
          class="form"
          label-width="120px"
          label-position="left"
          :class="{ 'disabled-form': disabledForm }"
        >
          <div class="border-b-#0B0B0B border-b-solid pb-10px mb-20px">
            <span class="text-21px text-#595A60">基础信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="colSpan">
              <el-form-item label="客户姓名">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.cust_name }}
                </div>
                <el-input
                  v-else
                  v-model="formData.cust_name"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="模式" prop="business_model">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.business_model_text }}
                </div>
                <el-select
                  v-else
                  v-model="formData.business_model"
                  disabled
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in BUSINESS_MODEL"
                    :key="index"
                    :value="item.val"
                    :label="item.remark"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="拍摄类型">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.type_text }}
                </div>

                <el-select v-else v-model="formData.type" style="width: 100%">
                  <el-option
                    v-for="(item, index) in TYPE"
                    :key="index"
                    :value="item.val"
                    :label="item.remark"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="精修数量" prop="meal_pic_num">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.meal_pic_num }}
                </div>
                <el-input-number
                  v-else
                  v-model="formData.meal_pic_num"
                  placeholder="套内包含精修数"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="border-b-#0B0B0B border-b-solid mb-20px pb-10px">
            <span class="text-21px text-#595A60">选片信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="colSpan">
              <el-form-item label="精修单价" prop="meal_unit_price">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.meal_unit_price || "--" }}元/张
                </div>

                <el-input-number
                  v-else
                  v-model="formData.meal_unit_price"
                  placeholder="请输入"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="底片" prop="is_sent_origin_photo">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.is_sent_origin_photo ? "不送" : "全送送" }}
                </div>
                <el-select
                  v-else
                  v-model="formData.is_sent_origin_photo"
                  style="width: 100%"
                >
                  <el-option :value="0" label="不送" />
                  <el-option :value="1" label="全送" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="佣金（%）" prop="commission_rate">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.commission_rate || "--" }}元/张
                </div>
                <el-input-number
                  v-else
                  v-model="formData.commission_rate"
                  placeholder="请输入"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="允许自主折扣" prop="is_allow_discount">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.is_allow_discount ? "是" : "否" }}
                </div>
                <el-select
                  v-else
                  v-model="formData.is_allow_discount"
                  style="width: 100%"
                >
                  <el-option :value="0" label="否" />
                  <el-option :value="1" label="是" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="满5单价" prop="touch_discount_five">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.touch_discount_five || "--" }}元/张
                </div>
                <el-input-number
                  v-else
                  v-model="formData.touch_discount_five"
                  placeholder="请输入"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="满10单价" prop="touch_discount_ten">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.touch_discount_ten || "--" }}元/张
                </div>
                <el-input-number
                  v-else
                  v-model="formData.touch_discount_ten"
                  placeholder="请输入"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="满20单价" prop="touch_discount_twenty">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.touch_discount_twenty || "--" }}元/张
                </div>
                <el-input-number
                  v-else
                  v-model="formData.touch_discount_twenty"
                  placeholder="请输入"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="底片单价">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.origin_plate_price || "--" }}元/张
                </div>
                <el-input-number
                  v-else
                  v-model="formData.origin_plate_price"
                  placeholder="请输入"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="底片打包价" prop="packet_amt">
                <div
                  v-if="['view'].includes(pageStatus)"
                  class="text-right text-#3F3F3F"
                >
                  {{ formData.packet_amt || "--" }}元
                </div>
                <el-input-number
                  v-else
                  v-model="formData.packet_amt"
                  placeholder="请输入"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <!-- <el-form-item label="工期" prop="DURATION">
            <el-select v-model="formData.duration_end_time" style="width: 100%">
              <el-option
                v-for="(item, index) in DURATION"
                :key="index"
                :value="item.val"
                :label="item.remark"
              />
            </el-select>
          </el-form-item> -->
            </el-col>
          </el-row>
          <!-- <div class="border-b-#0B0B0B border-b-solid pb-10px">
            <span class="text-21px">修图信息</span>
          </div> -->
          <!-- <el-row :gutter="20">
            <el-col :span="colSpan">
              <el-form-item label="客户姓名">
                                <div v-if="['view'].includes(pageStatus)" class="text-right">{{formData.cust_name||'--'}}</div>

                <el-input placeholder="系统匹配" v-else v-model="formData.cust_name" />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="底片数量" prop="picture_num">
                 <div v-if="['view'].includes(pageStatus)" class="text-right">{{formData.picture_num||'--'}}</div>
                <el-input-number
                v-else
                  v-model="formData.picture_num"
                  placeholder="自动识别"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="返修次数">
                                 <div v-if="['view'].includes(pageStatus)" class="text-right">{{formData.repair_times_text||'--'}}</div>
                <el-select v-model="formData.repair_times" v-else style="width: 100%">
                  <el-option
                    v-for="(item, index) in REPAIR_TIMES"
                    :key="index"
                    :value="item.val"
                    :label="item.remark"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="回件时间" prop="duration">
                <div v-if="['view'].includes(pageStatus)" class="text-right">{{formData.duration_text||'--'}}</div>
                <el-select v-else v-model="formData.duration" style="width: 100%">
                  <el-option
                    v-for="(item, index) in DURATION"
                    :key="index"
                    :value="item.val"
                    :label="item.remark"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="修图方式">
                <div v-if="['view'].includes(pageStatus)" class="text-right">{{formData.category_text||'--'}}</div>
                <el-select v-else v-model="formData.category" style="width: 100%">
                  <el-option
                    v-for="(item, index) in CATEGORY"
                    :key="index"
                    :value="item.val"
                    :label="item.remark"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="建议修图费">
                <el-input-number
                  placeholder="请输入"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="自定义修图费" prop="mch_amt">
                                <div v-if="['view'].includes(pageStatus)" class="text-right">{{formData.mch_amt||'--'}}</div>

                <el-input-number
                v-else
                  v-model="formData.mch_amt"
                  placeholder="不填则跟随系统建议"
                  :controls="false"
                  style="width: 100%; text-align: left"
                />
              </el-form-item>
            </el-col>
            <el-col :span="colSpan">
              <el-form-item label="修图备注">
                 <div v-if="['view'].includes(pageStatus)" class="text-right">{{formData.remark||'--'}}</div>
                <el-input v-else placeholder="请输入" v-model="formData.remark" />
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- <template v-if="task_order_id">
            <div class="border-b-#0B0B0B border-b-solid pb-10px">
              <span class="text-21px">创建相册</span>
            </div>
            <el-row :gutter="20">
              <el-col>
                <el-form-item>
                  <el-button-group>
                    <el-button
                      class="img-type"
                      :class="{ active: uploadType === 1 }"
                      @click="uploadType = 1"
                      >原档（0）</el-button
                    >
                    <el-button
                      class="img-type"
                      :class="{ active: uploadType === 2 }"
                      @click="uploadType = 2"
                      >底图（0）</el-button
                    >
                  </el-button-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-input
                    v-model="formData.photo_plate_url"
                    placeholder="输入百度网盘链接地址"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </template> -->
          <!-- <template v-if="['add'].includes(pageStatus)">
            <el-row>
              <el-col>
                <el-form-item>
                  <el-button
                    class="mr-40px bg-#191919 border-transparent"
                    @click="handleConfirm"
                  >
                    同意并发布
                  </el-button>
                  <el-checkbox v-model="formData.save_as_model">
                    保存此配置为模版
                  </el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
          </template> -->
        </el-form>
        <template v-if="['view', 'edit'].includes(pageStatus)">
          <div class="border-b-#0B0B0B border-b-solid pb-10px">
            <span class="text-21px">相册</span>
          </div>
          <el-row class="mb-20px">
            <el-col class="mt-40px">
              <el-upload
                multiple
                name="files[]"
                list-type="picture-card"
                :before-upload="beforeUpload"
                :headers="{ token: userToken }"
                :data="{ task_order_id, type: uploadType }"
                action="https://pddtest.qimiaola.com/api/TaskOrderImage/batchUpload"
              >
                <i class="el-icon-plus text-100px" />
              </el-upload>
            </el-col>
          </el-row>
          <!-- <el-row class="py-20px">
            <el-button
              class="order-btn"
              :class="{ active: imgType === 'origin' }"
              @click="imgType = 'origin'"
            >
              原档（{{ getPcOrderImages.origin.count }}）
            </el-button>
            <el-button
              class="order-btn"
              :class="{ active: imgType === 'select' }"
              @click="imgType = 'select'"
            >
              精修（{{ getPcOrderImages.origin.count }}）
            </el-button>
            <el-button
              class="order-btn"
              :class="{ active: imgType === 'retouch' }"
              @click="imgType = 'retouch'"
            >
              返修（{{ getPcOrderImages.origin.count }}）
            </el-button>
          </el-row> -->
          <el-row>
            <el-image
              v-for="(img, index) in getPcOrderImages[imgType].list"
              :key="index"
              :src="img.image_url"
              class="float-left img-item"
            />
          </el-row>
        </template>
        <el-row v-if="['add', 'edit'].includes(pageStatus)" class="mt-20px">
          <el-button
            class="mr-40px bg-#191919 border-transparent"
            @click="handleConfirm"
          >
            同意并发布
          </el-button>
          <!-- <el-checkbox v-model="formData.save_as_model">
            保存此配置为模版
          </el-checkbox> -->
        </el-row>
      </div>
      <div
        v-if="['edit', 'view'].includes(pageStatus)"
        class="page-right w-320px ml-20px"
      >
        <div
          class="border-b-#0b0b0b border-b-3 text-20px border-b-solid page-right-title relative mb-20px pb-16px px-20px"
        >
          操作
          <div
            class="absolute right-20 top--10px cursor-pointer"
            @click="$router.go(-1)"
          >
            &lt; 返回
          </div>
        </div>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-button
              class="text-18px bg-#191919 border-#191919"
              @click="pageStatus = 'edit'"
            >
              修改
            </el-button>
          </el-col>
          <el-col :span="12" class="20px">
            <el-button
              class="text-18px bg-#191919 border-#191919"
              @click="handleDelete"
            >
              取消订单
            </el-button>
          </el-col>
          <!-- <el-col :span="8"><el-button>加价</el-button></el-col>
          <el-col :span="8"><el-button>验收</el-button></el-col>
          <el-col :span="8"><el-button>申诉</el-button></el-col>
          <el-col :span="8"><el-button>合作</el-button></el-col>
          <el-col :span="8"><el-button>评价</el-button></el-col>
          <el-col :span="8"><el-button>消息</el-button></el-col> -->
        </el-row>
        <div
          class="border-b-#0b0b0b border-b-3 text-18px border-b-solid page-right-title py-16px mb-20px"
        >
          流程记录
        </div>
        <div class="pr-20px line-height-loose">
          <el-row class="text-13px" type="flex" justify="space-between">
            <el-col>商家[发布]</el-col>
            <el-col class="text-right"> 2024-09-23 14:59 </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col>修图师[拒单]</el-col>
            <el-col class="text-right"> 2024-09-23 14:59 </el-col>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-col>商家[加价]</el-col>
            <el-col class="text-right"> 2024-09-23 14:59 </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jsCookie from 'js-cookie'
export default {
  data () {
    return {
      imgType: 'origin',
      disabledForm: false,
      task_order_id: '',
      uploadType: 1, // 1=底片 2=精修
      formData: {
        /** 客户姓名 */
        cust_name: '',
        /** 模式 */
        business_model: '2',
        /** 拍摄类型 */
        type: '',
        /** 精修数量 */
        meal_pic_num: '',
        /** 精修单价 */
        meal_unit_price: '',
        /** 是否送底片 */
        is_sent_origin_photo: 0,
        /** 佣金 */
        commission_rate: '',
        is_allow_discount: 1,
        /** 满5优惠 */
        touch_discount_five: '',
        /** 满10优惠 */
        touch_discount_ten: '',
        touch_discount_twenty: '',
        packet_amt: '',
        origin_file_url: '',
        category: '',
        mch_amt: '',
        repair_times: '',
        picture_num: 0,
        save_as_model: true,
        photo_plate_url: '',
        remark: '',
        duration: ''
      },
      BUSINESS_MODEL: [],
      CATEGORY: [],
      DURATION: [],
      QUALITY: [],
      REPAIR_TIMES: [],
      TYPE: [],
      pageStatus: 'add',
      getPcOrderImages: {
        origin: {
          count: 0,
          list: []
        },
        retouch: {
          count: 0,
          list: []
        },
        select: {
          count: 0,
          list: []
        }
      }
    }
  },
  computed: {
    colSpan () {
      return ['add', 'edit'].includes(this.pageStatus) ? 6 : 8
    },
    userToken () {
      return jsCookie.get('auth._token.local')
    }
  },
  watch: {
    pageStatus (val) {
      if (['add', 'edit'].includes(val)) {
        this.disabledForm = false
      }
      if (['view'].includes(val)) {
        this.disabledForm = true
      }
    }
  },
  mounted () {
    this.$axios.get('/TaskOrder/getAttr').then(({ data }) => {
      // console.log(res, "ressss");
      const {
        BUSINESS_MODEL,
        CATEGORY,
        DURATION,
        QUALITY,
        REPAIR_TIMES,
        TYPE
      } = data
      this.BUSINESS_MODEL = BUSINESS_MODEL
      this.CATEGORY = CATEGORY
      this.DURATION = DURATION
      this.QUALITY = QUALITY
      this.REPAIR_TIMES = REPAIR_TIMES
      this.TYPE = TYPE
    })
    if (this.$route.query.id) {
      this.pageStatus = 'view'
      this.disabledForm = true
      this.task_order_id = this.$route.query.id
      this.$axios
        .post('/TaskOrder/getTaskOrderDetail', {
          task_order_id: this.$route.query.id
        })
        .then(({ data }) => {
          // console.log("xxxxxx");
          Object.assign(this.formData, data)
        })
      this.$axios
        .post('/TaskOrder/getPcOrderImages', {
          task_order_id: this.$route.query.id
        })
        .then(({ data }) => {
          this.getPcOrderImages = data
        })
      // this.$$axios.get('/TaskOrder/getOrderCountByStatus',)
    }
  },
  methods: {
    handleConfirm () {
      this.$axios
        .post('/TaskOrder/add', {
          ...this.formData,
          save_as_model: this.formData.save_as_model ? 1 : 0
        })

        .then(({ code, msg, data }) => {
          if (code !== 1) {
            this.$message.error(msg)
            return
          }
          // eslint-disable-next-line camelcase
          const { task_order_id } = data
          if (this.pageStatus === 'add') {
            this.$message.success('操作成功')
            // eslint-disable-next-line camelcase
            this.task_order_id = task_order_id
            this.$router.push({
              path: '/order/add',
              replace: true,
              query: {
                // eslint-disable-next-line camelcase
                id: task_order_id
              }
            })
          }

          // this.$router.go(-1);
          // console.log("vvv");
        })
    },
    beforeUpload (file) {
      return true
    },
    handleDelete () {
      this.$confirm('确认要取消订单吗？', '', {
        type: 'warning',
        message: '确认删除吗？',
        beforeClose: (action, instance, done) => {
          console.log(instance)
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            this.$axios
              .post('/TaskOrder/mchCancel', {
                task_order_id: this.task_order_id
              })
              .then(({ code, msg }) => {
                if (code === 1) {
                  this.$message.success('操作成功')
                  done()
                  this.$router.go(-1)
                } else {
                  instance.confirmButtonLoading = false
                  instance.type = 'error'
                  instance.message = msg
                }
              })
              .catch(() => {
                instance.confirmButtonLoading = false
              })
            // instance.confirmLoading
            console.log(instance)
          } else {
            done()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.page-right {
  color: #595a60;
  // width: 640px;
  margin-left: 30px;
  .page-right-title {
    padding: 15px 0;
    margin-bottom: 10px;
  }
  .el-button {
    width: 100%;
    background: #191919;
    border-color: #191919;
    margin-bottom: 10px;
  }
}
.img-type {
  background: #191919;
  border-color: #191919;
  &.active {
    background: transparent;
    border-color: transparent;
  }
}
/* margin: 0 auto; */
/* min-height: 100vh; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* text-align: center; */
.el-input-number .el-input__inner {
  text-align: left;
}
.form {
  .text-21px {
    font-size: 21px;
  }
  .text-24 {
    font-size: 24px;
  }
  .el-input__inner {
    background: #3c3c3c;
    border-color: transparent;
    &::-webkit-input-placeholder {
      color: #616161;
    }
  }
}
.el-form.disabled-form {
  .el-form-item {
    display: flex;
  }
  .el-form-item__content {
    flex: 1;
  }
  .el-col-8 {
    .el-form-item {
      display: flex;
      // justify-content: space-between;
      .el-input__inner {
        text-align: right;
      }
    }
    .el-input.is-disabled .el-input__inner::placeholder {
      display: none !important;
    }
    .el-input.is-disabled .el-input__icon {
      display: none;
    }
    .el-input.is-disabled .el-input__inner {
      background-color: transparent;
      border-color: transparent;
      color: rgb(63, 63, 63);
    }
  }
  .el-col-12 {
    .el-form-item {
      display: block;
      .el-form-item__content {
        display: block;
      }
    }
  }
}
.order-btn {
  background: #191919;
  border-color: #191919;
  &.active {
    background: transparent;
    border-color: transparent;
    color: #979797;
  }
}
.img-item {
  width: 176px;
  height: 165px;
  margin-right: 16px;
  margin-bottom: 20px;
}
.el-form-item__label,
.el-form-item__content {
  font-size: 18px;
}
.el-form-item__label {
  text-align: left;
}
.el-input.is-disabled .el-input__inner {
  background: #3c3c3c;
  border-color: transparent;
  color: #606266;
}
</style>
<style lang="scss" scoped>
</style>
